<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small" class="admin_from">
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.mch" placeholder="请输入代理商ID"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.nickname" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.source" placeholder="请选择注册来源" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="后台" value="admin"></el-option>
                        <el-option label="Android" value="Android"></el-option>
                        <el-option label="iOS" value="iOS"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="禁用" value="0"></el-option>
                        <el-option label="启用" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search">查询</el-button>
                    <el-button type="primary" size="small" @click="addRecharge">添加</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    size="small"
                    :data="tableData"
                    border
                    style="width: 100%">

                <el-table-column
                        type="index"
                        label="#">
                </el-table-column>
                <el-table-column
                        label="所属代理">
                    <template slot-scope="scope">
                        <div class="img">
                            <div>
                                <p>{{scope.row.mchInfo?scope.row.mchInfo.id:''}}</p>
                                <p>{{scope.row.mchInfo?scope.row.mchInfo.name:''}}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        width="200"
                        prop="address"
                        label="用户信息">
                    <template slot-scope="scope">
                        <div class="img">
                            <img :src="scope.row.avatar" alt="" width="30" height="30">
                            <div>
                                <p>{{scope.row.id}}</p>
                                <p>{{scope.row.nickname}}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="totalcoin"
                        :label="'累计'+this.$store.state.name">
                </el-table-column>
                <el-table-column
                        prop="coin"
                        :label="this.$store.state.name+'余额'">
                </el-table-column>
                <el-table-column
                        prop="charge_total"
                        label="累计充值">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="phone"
                        label="电话">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="是否vip"
                        width="160">
                    <template slot-scope="scope">
                        <span v-if="scope.row.is_vip==0">否</span>
                        <span v-if="scope.row.is_vip==1">是</span>
                        <p v-if="scope.row.is_vip==1"><span>到期时间：{{scope.row.viptime}}</span></p>
                    </template>
                </el-table-column>
                <el-table-column
                        label="注册来源">
                    <template slot-scope="scope">
                        {{scope.row.source == "admin"?"后台":scope.row.source}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="注册时间">
                    <template slot-scope="scope">
                        {{scope.row.created_at}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="上次登录时间">
                    <template slot-scope="scope">
                        {{scope.row.login_time}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.status" active-value="1" inactive-value="0"
                                @change="changeClick(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button type="warning" plain size="small" @click="edit(scope.row.id)">修改</el-button>
                        <el-button type="danger" plain size="small" @click="remove(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="el-pagination">
                <el-pagination
                        background
                        @size-change="changeSize"
                        @current-change="changeCurrent"
                        :current-page="params.pagenum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="params.pagesize"
                        :layout="this.$store.state.paginationLayout"
                        :total="params.totals">
                </el-pagination>
            </div>

        </el-card>
        <!--            新增或编辑-->
        <el-dialog :title="fromTitle" :width="this.$store.state.dialogWidth" :visible.sync="visible">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :label-width="this.$store.state.labelWidth" size="small">
                        <el-form-item label="头像">
                            <el-upload
                                    class="avatar-uploader"
                                    action="upDataUrl"
                                    :show-file-list="false"
                                    :http-request="myUpload"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="dataForm.avatar" :src="dataForm.avatar" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input v-model="dataForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="dataForm.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="dataForm.password" @blur="blurClick"></el-input>
                        </el-form-item>
                        <el-form-item :label="this.$store.state.name">
                            <el-input v-model="dataForm.coin"></el-input>
                        </el-form-item>
                        <el-form-item label="个性签名">
                            <el-input v-model="dataForm.sign"></el-input>
                        </el-form-item>
                        <el-form-item label="性别"
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-select v-model="dataForm.gender" placeholder="选择性别"
                                       :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-option label="保密" value="0"></el-option>
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态"
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-select v-model="dataForm.status" placeholder="状态"
                                       :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-option label="禁用" value="0"></el-option>
                                <el-option label="启用" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
    </div>
</template>

<script>
    import {uploadimg} from '../../utils/common'
    import {formatDate} from '../../utils/common'

    export default {

        name: "User",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0
                },
                form: {
                    subscribe: '',
                    charge: '',
                    nickname: '',
                },
                dataForm: {
                    phone: '',
                    password: '',
                    avatar: '',
                    nickname: '',
                    sign: '',
                    gender: '',
                    status: '',
                    coin: '',
                },
                imgData: {},
                domain: '',
                tableData: [],
                fromTitle: '',
                visible: false,
                imageUrl: '',
                id: '',
                searchForm: {
                    phone: '',
                    nickname: '',
                    status: '',
                    source: '',
                    mch: '',
                }
            }
        },
        created() {
            this.getList()
        },
        methods: {

            changeClick(e) {
                this.$axios.put('admin/user/' + e.id, {
                    status: e.status
                }).then((res) => {
                    this.$message.success('成功');
                    this.getList();
                    this.visible = false;
                });
            },
            getList() {
                let data = {
                    page: this.params.pagenum,
                    page_size: this.params.pagesize,
                    phone: this.searchForm.phone,
                    nickname: this.searchForm.nickname,
                    status: this.searchForm.status,
                    source: this.searchForm.source,
                    mch: this.searchForm.mch
                };
                this.$axios.post("admin/user/index", data).then((res) => {
                    this.params.totals = parseInt(res.data.count);
                    this.tableData = res.data.list;
                });
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList()
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList()
            },
            // 添加用户
            addRecharge() {
                this.fromTitle = '新增';
                this.id = '';
                this.dataForm = {
                    phone: '',
                    password: '',
                    avatar: '',
                    nickname: '',
                    sign: '',
                    gender: '',
                    status: '',
                };
                this.visible = true;
            },
            // 编辑用户
            edit(id) {
                this.id = id;
                this.fromTitle = '编辑';
                this.$axios.get('admin/user/' + id, {}).then((res) => {
                    res.data.password = '******';
                    let data = res.data;
                    this.dataForm = data;
                    this.visible = true;
                });
            },
            blurClick() {
                console.log(this.dataForm.password);
                if (this.dataForm.password == '******') {
                    this.dataForm.password = '******'
                } else {
                    this.dataForm.password = this.dataForm.password
                }
            },
            // 确认提交添加或编辑用户
            dialogAffirm() {
                if (this.id) {
                    if (this.dataForm.password == '******') {
                        this.dataForm.password = ''
                    }

                    this.$axios.put('admin/user/' + this.id, this.dataForm).then((res) => {
                        this.$message.success('成功');
                        this.getList();
                        this.visible = false;
                    });
                } else {
                    // 添加
                    this.$axios.post('/admin/user', this.dataForm).then((res) => {
                        this.$message.success('成功');
                        this.getList();
                        this.visible = false;
                    });
                }
            },
            remove(id) {
                this.$confirm('确定要进行操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.del('admin/user/' + id, '').then((res) => {
                        this.$message.success('删除成功!');
                        this.getList();
                    });
                }).catch(() => {

                });
            },
            beforeAvatarUpload(file) {
                var suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
                let arr = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'pdf', 'JPG', 'JPEG', 'PNG', 'GIF', 'BMP', 'PDF']
                if (arr.indexOf(suffix) === -1) {
                    this.$message.error('上传图片格式有误');
                    return false
                }
            },
            // 上传文件
            myUpload(content) {
                uploadimg(content).then(res => {
                    this.dataForm.avatar = res;
                })
            },
            search() {
                this.params.pagenum = 1;
                this.getList();
            },
        }
    }
</script>

<style scoped>
    .img {
        display: flex;
        align-items: center;
    }

    .img > img {
        margin-right: 10px;
    }
</style>